<template>
  <div class="d2-layout-header-aside-group">
    <!-- 半透明遮罩 -->
    <div class="d2-layout-header-aside-mask"></div>
    <!-- 主体内容 -->
    <div class="d2-layout-header-aside-content" flex="dir:top">
      <!-- 顶栏 -->
      <div class="d2-theme-header" flex-box="0" flex>
        <!-- <d2-menu-header flex-box="1"/> -->
        <!-- 顶栏右侧 -->
        <!-- <d2-menu-header flex-box="1"/> -->
        <div class="no-select" flex-box="1"></div>
        <div class="d2-header-right" flex-box="0">
          <d2-header-fullscreen />
          <d2-header-locales />
          <d2-header-user :isShowinfo="false" />
        </div>
      </div>
      <!-- 下面 主体 -->
      <!-- 主体 侧边栏 -->
      <d2-container>
        <div class="content">
          <div class="main">
            <el-col :span="24" class="title">
              <h1>{{ $t('page-register.form.tips22') }}</h1>
            </el-col>
            <el-col :span="24" class="title">
              <h3>
                {{ $t('page-register.form.tips23') }}:{{user.mch.regRemark}}
              </h3>
            </el-col>
            <el-col :span="24" class="title_sub">
              <div class="wire"></div>
              <h3> {{ $t('page-register.form.basic-information') }}</h3>
              <div class="wire"></div>
            </el-col>
            <el-row :gutter="24">
              <el-form ref="elForm" class="elForm" :model="formData" :rules="rules" size="medium" label-width="200px">
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.email')" prop="email" style="flex: 1">
                    <!-- :disabled="!checkedFrom.email" -->
                    <el-input v-model="formData.email" :placeholder="$t('page-register.form.email')" clearable disabled :style="{ width: '90%' }"></el-input>
                  </el-form-item>
                  <!-- <span class="span1" v-if="checkedFrom.email">{{ $t('page-register.form.pleaserevise') }}</span> -->
                  <div class="checkbox"> <span class="span2">{{ $t('page-register.form.tips23') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.phone')" prop="" style="flex: 1">
                    <el-input v-model.number="formData.mobile" onkeyup="this.value = this.value.replace(/[^\d.]/g,'');" :placeholder="$t('page-register.form.phone')" clearable :disabled="!checkedFrom.mobile" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.mobile">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.URL')" prop="url" style="flex: 1">
                    <el-input v-model="formData.url" :placeholder="$t('page-register.form.URL')" clearable :disabled="!checkedFrom.url" :style="{ width: '90%' }">
                      <template slot="prepend">http(s)://</template>
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.url">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.put-records')" prop="" style="flex: 1">
                    <el-input v-model="formData.beianNo" :placeholder="$t('page-register.form.put-records')" clearable :disabled="!checkedFrom.beianNo" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.beianNo">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.company-name')" prop="mchName" style="flex: 1">
                    <el-input v-model="formData.mchName" :placeholder="$t('page-register.form.company-name')" clearable :disabled="!checkedFrom.mchName" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.mchName">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.certificate-number')" prop="registerCertificateNo" style="flex: 1">
                    <el-input v-model="formData.registerCertificateNo" :placeholder="$t('page-register.form.certificate-number')" clearable :disabled="!checkedFrom.registerCertificateNo" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.registerCertificateNo">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.opening-bank-name')" prop="bankAccountName" style="flex: 1">
                    <el-input v-model="formData.bankAccountName" :placeholder="$t('page-register.form.opening-bank-name')" clearable :disabled="!checkedFrom.bankAccountName" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.bankAccountName">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.bank-account')" prop="bankAccountNo" style="flex: 1">
                    <el-input v-model.number="formData.bankAccountNo" :placeholder="$t('page-register.form.bank-account')" clearable :disabled="!checkedFrom.bankAccountNo" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.bankAccountNo">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>

                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.opening-bank-number')" prop="bankOpenBankNo" style="flex: 1">
                    <el-input v-model.number="formData.bankOpenBankNo" :placeholder="$t('page-register.form.opening-bank-number')" clearable :disabled="!checkedFrom.bankOpenBankNo" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.bankOpenBankNo">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.company-address')" prop="registerAddress" style="flex: 1">
                    <el-input v-model="formData.registerAddress" :placeholder="$t('page-register.form.company-address')" clearable :disabled="!checkedFrom.registerAddress" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.registerAddress">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.legal-person')" prop="corporation" style="flex: 1">
                    <el-input v-model="formData.corporation" :placeholder="$t('page-register.form.legal-person')" clearable :disabled="!checkedFrom.corporation" :style="{ width: '90%' }"></el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.corporation">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.landline-number')" prop="phone" style="flex: 1">
                    <el-input v-model.number="formData.phone" :placeholder="$t('page-register.form.landline-number')" clearable :disabled="!checkedFrom.phone" :style="{ width: '90%' }">
                    </el-input>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.phone">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="" prop="">
                    <div class="" style="color:red;">
                      {{$t('page-register.form.tips11')}}
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.registered-certificate')" prop="registerCertList" style="flex: 1" :class="{
                    concel:!checkedFrom.registerCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.registerCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :style="{ width: '90%' }" :http-request="
                        (params) => handleFileUpload(params, 'registerCertList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'registerCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips1')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.registerCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.Memorandum-Association')" prop="companyPoliceList" required style="flex: 1" :class="{
                    concel:!checkedFrom.companyPolice
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.companyPoliceList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'companyPoliceList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'companyPoliceList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.companyPolice">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.agent')" prop="companyAgentPassportList" required style="flex: 1" :class="{
                    concel:!checkedFrom.companyAgentPassport
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.companyAgentPassportList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'companyAgentPassportList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'companyAgentPassportList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.companyAgentPassport">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.liber')" prop="corporationCertList" required style="flex: 1" :class="{
                    concel:!checkedFrom.corporationCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.corporationCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'corporationCertList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'corporationCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.corporationCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.Director-resolution')" prop="corporationDecisionList" required style="flex: 1" :class="{
                    concel:!checkedFrom.corporationDecision
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.corporationDecisionList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'corporationDecisionList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'corporationDecisionList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.corporationDecision">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.Incorporation-Form')" prop="nncList" required style="flex: 1" :class="{
                    concel:!checkedFrom.nnc
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.nncList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) => handleFileUpload(params, 'nncList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(file, list, 'nncList')
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips2')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.nnc">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item prop="registerAddressCertList" required style="flex: 1" :class="{
                    concel:!checkedFrom.registerAddressCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.registerAddressCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'registerAddressCertList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'registerAddressCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips4')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.registerAddressCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.account-certificate')" prop="bankAccountNoCertList" required style="flex: 1" :class="{
                    concel:!checkedFrom.bankAccountNoCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.bankAccountNoCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'bankAccountNoCertList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'bankAccountNoCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips5')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.bankAccountNoCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.legal-personinfo')" prop="legalPersonCertList" required style="flex: 1" :class="{
                    concel:!checkedFrom.legalPersonCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.legalPersonCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'legalPersonCertList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'legalPersonCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips6')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.legalPersonCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.address-photo')" prop="officeCertList" required style="flex: 1" :class="{
                    concel:!checkedFrom.officeCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.officeCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) => handleFileUpload(params, 'officeCertList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(file, list, 'officeCertList')
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips7')}}）
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.officeCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.annual-return')" prop="" style="flex: 1" :class="{
                    concel:!checkedFrom.nar
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.narList" action="#" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) => handleFileUpload(params, 'narList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(file, list, 'narList')
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips8')}}
                        ;
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.nar">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.shareholder-information')" prop="" style="flex: 1" :class="{
                    concel:!checkedFrom.corporation25PercentCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.corporation25PercentCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(
                            params,
                            'corporation25PercentCertList'
                          )
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'corporation25PercentCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips9')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.corporation25PercentCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.Shareholder-address')" prop="" style="flex: 1" :class="{
                    concel:!checkedFrom.orporation25PercentAddrCert
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.corporation25PercentAddrCertList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(
                            params,
                            'corporation25PercentAddrCertList'
                          )
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'corporation25PercentAddrCertList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips10')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.orporation25PercentAddrCert">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <el-col :span="24" class="updata-item">
                  <el-form-item :label="$t('page-register.form.architecture-diagram')" prop="" style="flex: 1" :class="{
                    concel:!checkedFrom.enCompanyStructure
                  }">
                    <el-upload list-type="picture-card" :file-list="formData.enCompanyStructureList" action="#" :limit="10" multiple :before-upload="BeforeUpload" :on-change="handleFileChange" :on-preview="handlePreview" :http-request="
                        (params) =>
                          handleFileUpload(params, 'enCompanyStructureList')
                      " :on-success="
                        (res, file, list) =>
                          handleFileUploadsucceed(
                            file,
                            list,
                            'enCompanyStructureList'
                          )
                      ">
                      <i class="el-icon-plus avatar-uploader-icon"></i>
                      <div slot="tip" class="el-upload__tip">
                        {{$t('page-register.form.tips13')}}
                      </div>
                    </el-upload>
                  </el-form-item>
                  <div class="checkbox"> <span class="span1" v-if="checkedFrom.enCompanyStructure">{{ $t('page-register.form.pleaserevise') }}</span> <span class="span2" v-else>{{ $t('page-register.form.tips24') }}</span></div>
                </el-col>
                <!-- <el-col :span="24">
                  <el-form-item :label="$t('page-register.form.electronic-agreement')" prop="isAgree">
     
                    <el-radio v-model="formData.isAgree" label="1">{{$t('page-register.form.yes')}}</el-radio>
                    <el-radio v-model="formData.isAgree" label="2">{{$t('page-register.form.not')}}</el-radio>
                  </el-form-item>
                </el-col> -->

                <el-col :span="24" class="footer-btn">
                  <el-button type="success" @click="submitForm">{{$t('page-register.form.sbumitText')}}</el-button>
                </el-col>

              </el-form>
            </el-row>
          </div>
        </div>
      </d2-container>
    </div>
  </div>
</template>

<script>
import d2HeaderFullscreen from "../../../layout/header-aside/components/header-fullscreen";
import d2HeaderLocales from "../../../layout/header-aside/components/header-locales";
import d2HeaderUser from "../../../layout/header-aside/components/header-user";
import { mapState, mapGetters, mapActions } from "vuex";
import { updataFileOss } from '@/api/tools.js'
import mixinSearch from "../../../layout/header-aside/mixins/search";
import ApiMain from '@/api/register';
import r from 'highlight.js/lib/languages/r';
var _this = this
export default {
  name: "d2-layout-header-aside",
  mixins: [mixinSearch],
  components: {
    d2HeaderFullscreen,
    d2HeaderLocales,
    d2HeaderUser,
  },

  data() {


    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error(this.$t('page-register.form.tips19')));
      } else if (value !== this.formData.password) {
        callback(new Error(this.$t('page-register.form.tips20')));
      } else {
        callback();
      }
    };

    let validPassword = (rule, value, callback) => {
      let reg = /[\u4E00-\u9FA5]/g
      if (reg.test(value)) {
        callback(new Error(this.$t('page-register.form.tips34')))
      } else {
        callback()
      }
    };

        let validUrl = (rule, value, callback) => {
      if (/([\w-]+\.)+[\w-]+(\/[\w-./?%&=]*)?$/.test(value) == false) {
        callback(new Error(`${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.URL')}`));
      } else {
        callback();
      }
    }

    return {
      regStatus: 0,
      // [侧边栏宽度] 正常状态
      asideWidth: "200px",
      fieldStatus: [],
      // [侧边栏宽度] 折叠状态
      asideWidthCollapse: "65px", uploadUrl: util.getUploadUrl("trademailcallback/upload"),
      checked: false,
      clearableFrom: true, //表单是否可以编辑
      machInfo: {
        editStatus: "",
      },
      auditFrom: {
        regRemark: "",
        fieldStatus: [],
        regStatus: 1,
        id: "",
      },
      // 上传图片列表对应关系
      fileList: {
        registerCertList: 'registerCert',
        companyPoliceList: "companyPolice",
        companyAgentPassportList: "companyAgentPassport",
        corporationCertList: "corporationCert",
        corporationDecisionList: "corporationDecision",
        nncList: "nnc",
        registerAddressCertList: "registerAddressCert",
        bankAccountNoCertList: "bankAccountNoCert",
        legalPersonCertList: "legalPersonCert",
        officeCertList: "officeCert",
        narList: "nar",
        corporation25PercentCertList: "corporation25PercentCert",
        corporation25PercentAddrCertList: "corporation25PercentAddrCert",
        enCompanyStructureList: "enCompanyStructure"
      },
      // 标记的修改数据
      checkedFrom: {
        email: false,
        code: false,
        url: false,
        fieldStatus: false,
        nar: false,
        legalPersonCert: false,
        isAgree: false,
        corporation: false,
        corporation: false,
        corporation: false,
        registerAddress: false,
        bankOpenBankNo: false,
        bankAccountNo: false,
        registerCertificateNo: false,
        mchName: false,
        mobile: false,
        beianNo: false,
        registerCert: false,
        companyPolice: false,
        companyAgentPassport: false,
        corporationCert: false,
        corporationDecision: false,
        registerAddressCert: false,
        bankAccountNoCert: false,
        officeCert: false,
        corporation25PercentCert: false,
        corporation25PercentAddrCert: false,
        enCompanyStructure: false,
      },

      formData: {
        email: undefined,
        code: undefined,
        password: undefined,
        confirmpassword: undefined,
        mobile: undefined,
        mchName: undefined,
        beianNo: undefined,
        url: undefined,
        registerCertificateNo: undefined,
        bankAccountName: undefined,
        bankAccountNo: undefined,
        swiftCode: undefined,
        bankOpenBankNo: undefined,
        registerAddress: undefined,
        corporation: undefined,
        phone: undefined,
        regCert: "",
        companyPolice: "",
        companyAgentPassport: "",
        corporationCert: "",
        corporationDecision: "",
        nnc: "",
        registerAddressCert: "",
        bankAccountNoCert: "",
        legalPersonCert: "",
        bankCapitalFlow: "",
        officeCert: "",
        nar: "",
        fieldStatus: [{ "label": 33, "value": 12, "status": 1, "remark": "驳回" }],
        corporation25PercentCert: "",
        corporation25PercentAddrCert: "",
        enCompanyStructure: "",
        registerCertList: [],
        companyPoliceList: [],
        companyAgentPassportList: [],
        corporationCertList: [],
        corporationDecisionList: [],
        nncList: [],
        registerAddressCertList: [],
        bankAccountNoCertList: [],
        legalPersonCertList: [],
        officeCertList: [],
        narList: [],
        corporation25PercentCertList: [],
        corporation25PercentAddrCertList: [],
        enCompanyStructureList: [],
      },
       rules: {
        email: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.email')}`,
            trigger: "blur",
          },
          { type: 'email', message: this.$t('page.form.tips82'), trigger: ['blur', 'change'] }
        ],
        registerCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.registered-certificate')}`,
            trigger: "blur",
          },
        ],
        enCompanyStructureList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.architecture-diagram')}`,
            trigger: "blur",
          },
        ],
        corporation25PercentAddrCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Shareholder-address')}`,
            trigger: "blur",
          },
        ],
        corporation25PercentCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.shareholder-information')}`,
            trigger: "blur",
          },
        ],
        narList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.annual-return')}`,
            trigger: "blur",
          },
        ],
        officeCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.address-photo')}`,
            trigger: "blur",
          },
        ],
        legalPersonCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.legal-personinfo')}`,
            trigger: "blur",
          },
        ],
        bankAccountNoCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.account-certificate')}`,
            trigger: "blur",
          },
        ],
        registerAddressCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.address-proof')}`,
            trigger: "blur",
          },
        ],

        nncList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Incorporation-Form')}`,
            trigger: "blur",
          },
        ], corporationDecisionList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Director-resolution')}`,
            trigger: "blur",
          },
        ],

        corporationCertList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.liber')}`,
            trigger: "blur",
          },
        ],
        companyAgentPassportList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.agent')}`,
            trigger: "blur",
          },
        ],
        companyPoliceList: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.Memorandum-Association')}`,
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.email-code')}`,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.password')}`,
            trigger: "blur",
          },
        ],
        confirmpassword: [
          { required: true, validator: validatePass2, trigger: "blur" },
        ],
        field122: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.phone-area')}`,
            trigger: "change",
          },
        ],
        mobile: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.phone')}`,
            trigger: "blur",
          },
        ],
        url: [
          {
            validator: validUrl, trigger: 'blur'
          },
          // { type: 'url', required: true, message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.URL')}`, trigger: 'change' },
        ],
        beianNo: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.put-records')}`,
            trigger: "blur",
          },
        ],
        mchName: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.company-name')}`,
            trigger: "blur",
          },
        ],
        registerCertificateNo: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.certificate-number')}`,
            trigger: "blur",
          },
           { validator: validPassword, trigger: 'blur' }
        ],
        bankAccountName: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.opening-bank-name')}`,
            trigger: "blur",
          },
        ],
        isAgree: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.electronic-agreement')}`,
            trigger: "blur",
          },
        ],
        bankAccountNo: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.bank-account')}`,
            trigger: "blur",
          },
        ],
        swiftCode: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.opening-bank')}`,
            trigger: "blur",
          },
        ],
        bankOpenBankNo: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.opening-bank-number')}`,
            trigger: "blur",
          },
        ],
        registerAddress: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.company-address')}`,
            trigger: "blur",
          },
        ],
        corporation: [
          {
            required: true,
            message: `${this.$t('page-register.form.plaseInput')}${this.$t('page-register.form.legal-person')}`,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            type: 'number',
            message: `${this.$t('page-register.form.plaseInput2')}${this.$t('page-register.form.landline-number')}`,
            trigger: "blur",
          },
        ],
      },
      timer: null,
      count: this.$t('page-register.form.sendCode')
    };
  },
  computed: {
    ...mapState("d2admin", {
      keepAlive: (state) => state.page.keepAlive,
      grayActive: (state) => state.gray.active,
      transitionActive: (state) => state.transition.active,
      asideCollapse: (state) => state.menu.asideCollapse,
      asideTransition: (state) => state.menu.asideTransition,
    }),
    ...mapState("d2admin/user", {
      user: "info",
    }),
    ...mapGetters("d2admin", {
      themeActiveSetting: "theme/activeSetting",
    }),
    /**
     * @description 最外层容器的背景图片样式
     */
    styleLayoutMainGroup() {
      return this.themeActiveSetting.backgroundImage
        ? {
          backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`,
        }
        : {};
    },
  },
  mounted() {
  },
  created() {
    _this = this
    this.getMchInfo()
  },
  methods: {
    ...mapActions("d2admin/menu", ["asideCollapseToggle"]),
    /**
     * 接收点击切换侧边栏的按钮
     */
    async getMchInfo() {
      console.log('数据', this.user)
      let data = await ApiMain.getMchinfo({ id: this.user.mch.id })
      this.machInfo = data
      this.translateFrom(data)
    },
    anewMch(index) {
      // 不等于1的话要处理表单回显
      this.auditFrom.fieldStatus = []
      Object.keys(this.checkedFrom).forEach(index => {
        if (this.checkedFrom[index]) {
          this.auditFrom.fieldStatus.push({ "label": index, "value": this.formData[index], "status": 1, "remark": "驳回" })
        }
      })

      if (index != 1 && !this.auditFrom.regRemark) return this.$message({ type: 'error', message: '请填写拒绝原因!' })
      // 通过
      this.auditFrom.id = this.formData.id
      this.auditFrom.regStatus = index,
        this.auditFrom.editRemark = this.auditFrom.regRemark
      this.auditFrom.editStatus = 2
      ApiMain.anewMch(this.auditFrom).then(res => {
        console.log(res)
        this.$message({ type: 'success', message: '审核成功!' })
        this.$router.go(-1)
        this.getMchInfo()
      })

    },
    passMch(index) {
      if (index != 1) {
        // 不等于1的话要处理表单回显
        this.auditFrom.fieldStatus = []
        Object.keys(this.checkedFrom).forEach(index => {
          if (this.checkedFrom[index]) {
            this.auditFrom.fieldStatus.push({ "label": index, "value": this.formData[index], "status": 1, "remark": "驳回" })
          }
        })
      }
      if (index != 1 && !this.auditFrom.regRemark) return this.$message({ type: 'error', message: '请填写拒绝原因!' })
      // 通过
      this.auditFrom.id = this.formData.id
      this.auditFrom.regStatus = index,
        ApiMain.pass(this.auditFrom).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '审核成功!' })
          this.$router.go(-1)
          this.getMchInfo()
        })

    },
    //  回显表单方法 这个地方要复用

    translateFrom(from) {
      //   表单回显
      Object.keys(_this.fileList).forEach(function (index) {
        from[index] = []
        if (from[_this.fileList[index]]) {
          let arr = from[_this.fileList[index]].split(',')
          arr.forEach(file => {
            from[index].push({
              url: file,
              name: file
            })
          })
        }
      });
      this.formData = from
      // checkedFrom
      this.fieldStatus = from.fieldStatus
      from.fieldStatus.forEach(item => {
        this.checkedFrom[item.label] = true
      })
    },
    handleFileUploadsucceed(file, fileList, type) {
      this.formData[type] = fileList
    },
    handlePreview(file) {
      var a = document.createElement("a");
      var event = new MouseEvent("click");
      a.download = file.name;
      a.href = file.url;
      a.dispatchEvent(event);
    },
    async senEmailCode() {
      //   let data = await ApiMain.varifyEmail({ email: this.formData.email })
      //   if (data == 0) return this.$message({ type: 'error', message: '该邮箱已被注册！请更换邮箱' })
      //   ApiMain.getEmailCode({ type: 1, email: this.formData.email }).then(res => {
      //     this.$message({ type: 'success', message: '发送成功！' })
      //   })
      this.countDown()
    },
    countDown() {
      //发送验证码
      if (!this.timer) {
        this.count = 60;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    /**
     * 接收点击切换侧边栏的按钮
     */
    handleToggleAside() {
      this.asideCollapseToggle();
    },
    returnDisposeUrL(arr, index) {
      let str = ''


      try {
        // 过滤一下上传失败 element判断图片为一张是
        arr.forEach(item => {

          console.log(item)
          if (item.status == "success") {
            str += (item.response ? item.response.requestUrls[0] : item.url) + ','
          }
        })
        str = str.substring(0, str.length - 1)
      } catch (error) {
        console.log('处理文件错误错误:', index, arr, error)
      }
      return str
    },
    async submitForm() {
      // 需要的字段
      // let fieldList = ['id']
      // this.fieldStatus.forEach(item => {
      //   fieldList.push(item.label)
      // })
      let fieldList = ["id", 'code', "url", "beianNo", "mobile", "mchName", "registerCertificateNo", "bankAccountName", "bankAccountNo", "bankOpenBankNo", "registerAddress", "corporation", "corporation"
        , "corporation", "phone", "isAgree", "legalPersonCert", "fieldStatus", "nar", "registerCert", "companyPolice", "companyAgentPassport", "corporationCert", "corporationDecision"
        , "nnc", "registerAddressCert", "bankAccountNoCert", "officeCert", "corporation25PercentCert", "corporation25PercentAddrCert", "enCompanyStructure"]

      this.$refs["elForm"].validate(async (valid) => {
        if (!valid) return this.$message({ type: 'warning', message: this.$t('page-register.form.tips16') });
        Object.keys(_this.fileList).forEach(function (index) {
          _this.formData[_this.fileList[index]] = _this.returnDisposeUrL(_this.formData[index], index)
        });
        let updataFrom = {}
        fieldList.forEach(item => {
          updataFrom[item] = _this.formData[item]
        })
        updataFrom.isReAuth = 1
        console.log(updataFrom)
        let start = await ApiMain.setMchinfo(updataFrom)
        this.$message({ type: 'success', message: this.$t('page-register.form.tips17') })
        this.$router.push({
          name: 'registerStait',
          query: {
            email: this.formData.email
          }
        })
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 10;
      if (!isRightSize) {
        this.$message.error(this.$t('page-register.form.tips18'));
      }
      return isRightSize;
    },
    handleFileChange(file, fileList) {
      this.file = fileList;
    },
    async handleFileUpload(params, type) {
      let data = await updataFileOss(params, type)
      return data.res
    },

  },
};
</script>

<style lang="scss" scoped>
.checkbox {
  margin-left: 20px;
  width: 120px;
  margin-bottom: 22px;
  text-align: right;
  .span1 {
    color: red;
  }
  .span2 {
    color: #67c23a;
  }
}
.content {
  max-width: 90%;
}
.main {
  max-width: 1000px;
  margin: 0px auto;
}
.elForm {
  height: 100%;
  margin: 0px auto;
}
.el-upload__tip {
  line-height: 1.2;
}
.title {
  text-align: center;
  // margin-top: 50px;
}
.title_sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .wire {
    width: 40%;
    height: 1px;
    background-color: rgb(227, 227, 227);
  }
}
.footer-btn {
  display: flex;
  justify-items: center;
  justify-content: center;
  margin-bottom: 100px;
}
.header-right {
  float: right;
  display: flex;
  justify-content: flex-end;
  padding-right: 100px;
  margin-top: 30px;
}
.updata-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
<style lang="scss" scoped>
.d2-main {
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .d2-main-title {
    color: rgba(255, 149, 149, 100);
    font-size: 40px;
  }
  .d2-main-text {
    color: rgba(123, 123, 123, 100);
    font-size: 26px;
  }
  .d2-main-image {
    height: 350px;
    width: 350px;
    border-radius: 50%;
  }
}
.footer-btn {
  display: flex;
  justify-items: center;
  justify-content: center;
  margin-bottom: 100px;
  margin-top: 50px;
}
</style>
<style lang="scss">
// 注册主题
@import "~@/assets/style/theme/register.scss";
.container-component {
  overflow: auto;
}
.concel {
  .uoloadSty .el-upload--picture-card {
    width: 148px;
    height: 148px;
    line-height: 146px;
  }
  .el-upload--picture-card {
    display: none !important; /* 上传按钮隐藏 */
  }
}
</style>
